<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>天气表格</title>

<style >

.title {
font-size: 30px;
background: darkgray;
}

h1 {
 color: blue;
}



.img {
  width:35px;height:25px
}


th {
background: rgb(210,219, 249);
font-weight: bolder;
font-size: 18px;
height: 36px;
border: solid 1px rgb(135, 159, 209);
padding: 0;
}

td {
font-size: 15px;
padding: 0;
text-align: center; //水平居中
height: 30px;
min-width: 120px;
border: solid 1px rgb(135, 159, 209);
}

table {
border-collapse: collapse; /*单元格间的边界合并 :collapse */
/*border-spacing:20px; seprate才有用*/
}

#emptyTd {
height: 8px;
border: 0px;
}




.imgTd {
min-width: 60px;
}

</style>

</head>

<body style="background:rgb(231,235,245);">

<!-- 标注 -->



<table border="0">

<thead>
<tr>
  <th colspan="2">日期</th>
  <th colspan="2">天气现象</th>
  <th >气温</th>
  <th >风向</th>
  <th >风力</th>
</tr>
</thead>

<tbody>
<tr>
  <td rowspan="2">22日星期五</td>
  <td>白天</td>
  <td  class="imgTd"><img class="img" src="img/sun.png" alt=""></td>
  <td>晴间多云</td>
  <td>高温37度</td>
  <td>无持续风向</td>
  <td>微风</td>
</tr>

<tr>
  <td>夜间</td>
  <td  class="imgTd"><img class="img" src="img/moon.png" alt=""></td>
  <td>晴</td>
  <td>低温4度</td>
  <td>无持续风向</td>
  <td>微风</td>
</tr>

<!-- 空隙行 -->
<tr border="0">
  <td  id="emptyTd" colspan="7"></td>
</tr>

<tr>
  <td rowspan="2">22日星期五</td>
  <td>白天</td>
  <td class="imgTd"><img class="img" src="img/sun.png" alt=""></td>
  <td>晴间多云</td>
  <td>高温37度</td>
  <td>无持续风向</td>
  <td>微风</td>
</tr>


<tr>
  <td>夜间</td>
  <td  class="imgTd"><img class="img" src="img/moon.png" alt=""></td>
  <td>晴</td>
  <td>低温4度</td>
  <td>无持续风向</td>
  <td>微风</td>
</tr>

</tbody>


</table>


</body>
</html>
